<template>
  <modal
    v-model="showUserModal"
    :footer-hide="true"
    :closable="true"
    title="添加用户"
  >
    <Form ref="addForm" :model="userMode" label-position="left"
          :label-width="100" :rules="rules"
          @keydown.enter.native="formSubmit">
      <FormItem label="用户名" prop="username">
        <Input v-model="userMode.username" type="text"></Input>
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input v-model="userMode.password" type="password"></Input>
      </FormItem>
      <FormItem label="手机号" prop="phone">
        <Input v-model="userMode.phone" type="tel"></Input>
      </FormItem>
      <FormItem label="启用状态" prop="status">
        <RadioGroup  type="button" v-model="userMode.status">
          <Radio label="Enable" value="200">启用</Radio>
          <Radio label="Disable" value="500">禁用</Radio>
          <Radio label="Lock" value="400">锁定</Radio>
          <Radio label="Unlock" value="402">解除锁定</Radio>
          <Radio label="NoPassWord" value="308">密码过期</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="启用角色" prop="roles">
        <CheckboxGroup v-model="userMode.roles">
          <Checkbox v-for="(item) in roleList" :label="item.id" :key="item.id">
            <span>{{ item.roleName }}</span>
          </Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem class="right">
        <Button type="primary" class="rapper" @click="formSubmit">确定</Button>
        <Button type="info" class="rapper" @click="formCancel">取消</Button>
      </FormItem>
    </Form>
  </modal>

</template>

<script>
import {addUserData, getRoleTableData} from '@/api/data'
import qs from "qs"
import {covertToTreeList} from "@/libs/util";
export default {
  name: "AddUser",
  data() {
    return {
      roleList: [],
      userMode: {
        username: '',
        password: '',
        phone: '',
        roles: [],
        status: ''
      },
      showUserModal: false,
    }
  },
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      }
    },
    phoneRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '手机号不能为空', trigger: 'blur'}
        ]
      }
    },
  },
  computed: {
    rules() {
      return {
        username: this.userNameRules,
        password: this.passwordRules,
        phone: this.phoneRules
      }
    }
  },
  methods: {
    formSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.formatterRole();
          addUserData(this.userMode).then(res => {
            let data = res.data;
            if (data && data.code === 200) {
              this.$Message.success("添加成功！");
              this.$emit("refresh")
            } else {
              this.$Message.error(data.message);
            }
            this.showUserModal = false
          })
        }else{
          console.log(this.$refs.addForm)
        }
      });
    },
    formCancel() {
      this.showUserModal = false
      this.$Message.info("取消添加用户！");
    },
    showThis(){
      this.userMode.roles = []
      this.showUserModal = true;
    },
    formatterRole(){
      let roles = this.userMode.roles;
      this.userMode.roles = [];
      roles.forEach((item)=>{
        this.userMode.roles.push({id:item})
      })
    }
  },
  mounted() {
    getRoleTableData().then(roles=>{
      this.roleList = roles.data.object;
    });
  }
}
</script>

<style scoped lang="less">
.right {
  text-align: right
}

.rapper {
  margin: 0 2px;
}
</style>
